<template>
  <div>
    <!-- 在两个互斥的radio中，一定要有相同的name值，不然不能互斥选择。 -->
    <h3>radio的v-model使用</h3>
    <input type="radio" name="sex" v-model="sex" value="男" />男
    <input type="radio" name="sex" v-model="sex" value="女" />女
    <P>您选择的是：{{ sex }}</P>
    <P>------------------------------------------</P>

    <h3>input的v-model使用</h3>
    <input v-model="message" />
    <P>您输入的是：{{ message }}</P>
    <P>------------------------------------------</P>

    <h3>
      input的双向绑定，处理使用v-model，自实现双向绑定功能，v-bind和v-on指令结合
    </h3>
    <input :value="message1" @input="inputlistener" />
    <P>您输入的是：{{ message1 }}</P>
    <P>------------------------------------------</P>

    <h3>checkbox的双向绑定，单选checkbox和双选checkbox</h3>
    <H4>单选</H4>
    <input type="checkbox" v-model="agree" />同意条款
    <P>您选择了同意：{{ agree }}</P>
    <button :disabled="!agree">下一步</button>
    <P>----------------</P>

    <H4>多选</H4>
    <input type="checkbox" value="写字" v-model="hobbies" />写字
    <input type="checkbox" value="绘画" v-model="hobbies" />绘画
    <input type="checkbox" value="唱歌" v-model="hobbies" />唱歌
    <input type="checkbox" value="跳舞" v-model="hobbies" />跳舞
    <P>您选择了同意：{{ hobbies }}</P>
    <P>----------------</P>

    <H4>select选择框单选</H4>
    <select name="singlefruit" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="梨">梨</option>
      <option value="葡萄">葡萄</option>
    </select>
    <P>您选择了水果：{{ fruit }}</P>
    <P>----------------</P>

    <H4>select选择框多选</H4>
    <select name="multifruit" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="梨">梨</option>
      <option value="葡萄">葡萄</option>
    </select>
    <P>您选择了水果：{{ fruits }}</P>
    <P>----------------</P>
    <div class="example">
      <p>v-model 原理</p>
      <p>v-model 只是语法糖而已</p>
      <pre>
      v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

      text 和 textarea 元素使用 value property 和 input 事件；
      checkbox 和 radio 使用 checked property 和 change 事件；
      select 字段将 value 作为 prop 并将 change 作为事件。

      作者：Big shark@LX
      链接：https://juejin.cn/post/6961222829979697165
      来源：稀土掘金
      著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
      </pre>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'formExample',
    components: {},
    data() {
      return {
        sex: '男',
        message: '希望好运降临！',
        message1: 'iloveyou',
        agree: false,
        hobbies: [],
        fruit: '苹果',
        fruits: []
      }
    },
    methods: {
      inputlistener(event) {
        this.message1 = event.target.value
      }
    },
    activated: {},
    deactivated: {}
  }

</script>
<style lang="less" scoped></style>
